<template>
  <div class="recharge other_common">
    <table class="common">
      <tbody>
        <tr>
          <td>充值卡密</td>
          <td>充值时间(天)</td>
          <td>金额</td>
          <td>状态</td>
          <td>操作</td>
        </tr>
        <tr>
          <td>
          </td>
         <td>
            <!-- <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期">
            </el-date-picker> -->
            <input type="text" v-model="recharge_time" />
          </td>
          <td>
            <input type="text" v-model="amount" />
          </td>
          <td></td>
          <td>
            <a @click="Add(only)">添加</a>
          </td>
        </tr>
        <!-- 追加每一项 -->
          <tr v-for="(person,index) in infoArr" :key="index" >
          <td>{{person.card_password}}</td>
          <td>{{person.recharge_time/86400}}</td>
          <td>{{person.amount}}</td>
          <td>{{person.status == 0 ?  "禁用" : "启用"}}</td>
          <td>
            <a @click="Delete(person.id,index)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
    <div v-if="show" style="text-align: center;padding-top:10px">
      <el-pagination
          prev-text="上一页"
          next-text="下一页"
          background
          @current-change="currChange"
          layout="prev, pager, next"
          :page-size="per_page"
          :total="total">
        </el-pagination>
    </div>
  </div>
</template>

<script>
import http from "@/utils/http";
export default {
  data() {
    return {
      recharge_time:"",
      amount:"",
      infoArr:[],
      only:"",
      total:0,//一共有多少条数据
      per_page:1,//一页显示多少条数据
      curPage:1,
      show:false,
    };
  },
  methods: {
    digital(){
      let token=sessionStorage.getItem('token');
      let account_id=this.only;
      let page=this.curPage;
      http
        .post(
          `/api/rechargecard/recharge_card/get_list?token=${token}&account_id=${account_id}&page=${page}`,
        )
        .then(response => {
          console.log(response,'+++++++')
          this.infoArr=response.data.list;
          if(response.data.num>0){
            this.show=true;
            this.total=response.data.num;//一共有多少条数据
            this.per_page=response.data.per_page;//一页显示多少条数据
          }else{
            this.show=false;
          }
          
        });
    },
    Add(e){
      console.log(e);
      let token=sessionStorage.getItem('token');
      var obj={};
      obj.account_id=e;
      obj.recharge_time=this.recharge_time;
      obj.amount=this.amount;
      obj.status=1;
      http
        .post(
          `/api/rechargecard/recharge_card/add?token=${token}`,obj
        )
        .then(response => {
          if(response.data.status==true){
            this.digital();
            this.recharge_time="";
            this.amount="";
          }else{
            console.log('添加失败!');
          }
        });
    },
    Delete(a,index){
      let token=sessionStorage.getItem('token');
      let id =a;
      http
          .post(
            `/api/rechargecard/recharge_card/delete?token=${token}&id=${id}`
          )
          .then(response => {
            // console.log(response,'==========')
            if(response.data.status==true){
              this.infoArr.splice(index,1);
            }else{
              console.log('删除失败!')
            }
        });
    },
    currChange(val){
      console.log(`当前页:${val}`);
      this.curPage = val;
      this.digital()
    },
  },
  created() {
      let account=JSON.parse(localStorage.getItem('account'));
      this.only=account.id;
      this.digital();
    },
    watch: {
      infoArr:function(){
        if(this.infoArr.length===0){
          if(this.curPage>1){
            this.curPage=this.curPage-1
            this.digital();
          }
          
        }
      },
   }
};
</script>

<style>
.recharge {
  padding-top: 20px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  color: #fff;
  background-color: #04c;
  *background-color: #003bb3;
}
.btn:hover,
.btn:focus {
  text-decoration: none;
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
  -moz-transition: background-position 0.1s linear;
  -o-transition: background-position 0.1s linear;
  transition: background-position 0.1s linear;
}
.btn-primary {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-image: linear-gradient(to bottom, #08c, #04c);
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
</style>
